<template>
    <refundDetail ref="refundDetail" />
    <addEditApprovalRefund ref="addEditApprovalRefund" />
    <el-dialog v-model="dialogVisible" title="提示" width="500" :before-close="handleClose">
        <span v-if="this.dialogType == 1">确定要标记为已处理吗？</span>
        <span v-if="this.dialogType == 0">确定要标记为未处理吗？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirm">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <!-- <reviewApprove ref="reviewApprove" /> -->
    <!-- <div class="app-table"> -->
    <div class="app-body">
        <div class="app-search">
            <el-form :inline="true" class="demo-form-inline" v-model="form">
                <el-form-item label="" :label-width="formLabelWidth" prop="gradeId">
                    <el-date-picker v-model="form.yaer" type="year" placeholder="请选择退费年份" @change="changeTime"
                        style="width: 200px;" />
                </el-form-item>
                <el-form-item label="" :label-width="formLabelWidth" prop="classId">
                    <el-select v-model="form.type" autocomplete="off" placeholder="请选择退费类型" clearable
                        style="width: 200px;">
                        <el-option v-for="(item, index) in refundType" :key="index" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="姓名" v-model="form.studentName"><template #suffix style="width: 200px;">
                            <el-icon class="el-input__icon">
                                <img src="../../assets/refund_search.png" alt="">
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item label="">
                    <el-input placeholder="学号" v-model="form.studentNumber"><template #suffix style="width: 200px;">
                            <el-icon class="el-input__icon">
                                <img src="../../assets/refund_search.png" alt="">
                            </el-icon>
                        </template></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="serach_btn" type="primary" @click="onSubmit"
                        @keyup.enter="searchEnter">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-table :data="list" header-row-class-name="table_header" size="large" 
            :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px', }" style="color: #5B5A7E;">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="paymentName" label="任务名称" width="280" />
            <el-table-column prop="studentName" label="姓名" width="80" />
            <el-table-column prop="studentNumber" label="学号" width="100" />
            <el-table-column prop="applyReason" label="申请原因" min-width="250" />
            <el-table-column prop="createTime" label="申请时间" width="170" />
            <el-table-column prop="statusName" label="退费状态" width="90">
                <template style="display: block" #default="scope">
                    <p style="margin: 0;" v-if="scope.row.status == 0">未审批</p>
                    <p style="margin: 0;" v-if="scope.row.status == 1 || scope.row.status == 2">审批中</p>
                    <p style="margin: 0;" v-if="scope.row.status == 9">已通过</p>
                    <p style="margin: 0;" v-if="scope.row.status == 3">未通过</p>
                    <p style="margin: 0;" v-if="scope.row.status == 4">已退费</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="350px">
                <template style="display: block" #default="scope">
                    <div class="flex">
                        <el-button class="del_btn" size="small" type="danger" v-if="scope.row.status == 0"
                            @click="approveHandle(scope.row)">审批
                        </el-button>
                        <el-button class="edit_btn" size="small" type="primary"
                            @click="checkhandle1(scope.row.id, scope.row.paymentId)">明细
                        </el-button>
                        <el-button class="down_btn" size="small" type="danger"
                            @click="DownloadApprovalForm(scope.row.id)">下载审批表
                        </el-button>
                        <div class="btnBox flex">
                            <p @click="resetHandle(scope.row.id)" v-if="scope.row.status == 1">重置</p>
                            <div class="xian" v-if="scope.row.status == 1"></div>
                            <p @click="controlHandle(scope.row.id, 1)" v-if="scope.row.operateStatus == 0">未处理</p>
                            <p @click="controlHandle(scope.row.id, 0)" v-if="scope.row.operateStatus == 1">已处理</p>
                            <div class="xian"></div>
                            <p @click="deleteRefund(scope.row.id)">删除</p>
                        </div>
                        <!-- <div class="flex">
                            <el-button class="del_btn" size="small" type="danger" @click="deleteRefund(scope.row.id)">删除
                            </el-button>
                            <el-button class="del_btn" size="small" type="danger" @click="deleteRefund(scope.row.id)">删除
                            </el-button>
                        </div> -->
                    </div>
                </template>
            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <div style="margin-top: 10px">
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
    </div>

    <!-- </div>   -->
</template>
<script>
import { ElConfigProvider, ElMessageBox, ElMessage, backtopEmits } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { formatTime1 } from "@/utils/dateFormat";
import { Picture as IconPicture, Upload } from "@element-plus/icons-vue";
import refundDetail from "./refundDetail.vue"
import addEditApprovalRefund from "./addEditApprovalRefund.vue"
export default {
    name: "ReviewStudentListView",
    data() {
        return {
            type: 0,
            title: "",
            page: 1,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            name: "",
            map: {},
            classInfos: [],
            gradeIds: [],
            dialogVisible: false,
            dialogId: "",
            dialogType: "",
            form: {
                year: "",
                type: "",
                studentName: "",
                studentNumber: "",
            },
            refundType: [
                {
                    value: 1,
                    label: '退学',
                },
                {
                    value: 2,
                    label: '建档立卡',
                },
                {
                    value: 3,
                    label: '其他',
                },
            ],
        };
    },
    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage,
        refundDetail,
        addEditApprovalRefund,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getPaymentRefundList();
        // this.getBaseClassInfoList();
        // this.getGradeIds();
    },
    methods: {
        headerRowClassName({ row, rowIndex }) {
            return 'custom-header-row'; // 自定义的样式类名
        },

        changeTime(value) {
            value ? value = value : value = ''
            console.log(value);
            if (value) {
                const date = new Date(value)
                this.form.year = date.getFullYear()
            } else {
                this.form.year = ""
            }
        },

        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.getPaymentRefundList();
            }
        },

        checkhandle1(id, paymentId) {
            //旧接口
            this.$refs.refundDetail.getDetail(id)
            //新接口
            // this.$refs.refundDetail.getDetail(paymentId)
            this.$refs.refundDetail.getApprove(id)
            this.$refs.refundDetail.queryData = {}
            this.$refs.refundDetail.imageData = []
            this.$refs.refundDetail.approveData = []
            this.$refs.refundDetail.flag = true
        },

        deleteRefund(id) {
            ElMessageBox.confirm("确定要删除本条记录吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/paymentRefund/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("删除成功");
                                this.getPaymentRefundList();
                            } else {
                                ElMessage.error("删除失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },

        onSubmit() {
            console.log(this.form);
            this.getPaymentRefundList();
        },

        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getPaymentRefundList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getPaymentRefundList();
        },

        getPaymentRefundList() {
            httpService(
                "/javaApi/paymentRefund/list/" + this.page + "/" + this.pageSize,
                {
                    startDate: this.form.year,
                    type: this.form.type ? this.form.type : '',
                    // studentName: "高田预",
                    studentName: this.form.studentName,
                    studentNumber: this.form.studentNumber,
                },
                "get"
            ).then((data) => {
                if (data.list) {
                    data.list.map(item => {
                        if (item.createTime) {
                            item.createTime = formatTime1(item.createTime)
                        }
                    })
                }
                this.list = data.list;
                this.total = data.total;
                this.pageCount = data.pages;
            });
        },

        DownloadApprovalForm(id) {
            httpService(
                "/javaApi/paymentRefund/getPdf",
                { id: id },
                "get"
            ).then((data) => {
                window.open("https://wx.zhengzhong.cn" + data.message, "_blank")
            });
        },

        confirm() {
            let params = new FormData()
            params.append("id", this.dialogId)
            params.append("operateStatus", this.dialogType)
            httpService(
                "/javaApi/paymentRefund/edit",
                params,
                "post"
            ).then((data) => {
                console.log(data);
                if (data.code == 200) {
                    ElMessage.success("修改成功");
                    this.dialogVisible = false
                    this.getPaymentRefundList()
                } else {
                    ElMessage.error("修改失败 ");
                }

            });
        },

        resetHandle(id) {
            ElMessageBox.confirm("确定要重置审批流程吗？", "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append("id", id)
                    params.append("status", 0)
                    httpService("/javaApi/paymentRefund/edit", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                ElMessage.success("重置成功");
                                this.getPaymentRefundList();
                            } else {
                                ElMessage.error("重置失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },

        controlHandle(id, type) {
            this.dialogVisible = true
            this.dialogId = id
            this.dialogType = type
        },

        approveHandle(data) {
            this.$refs.addEditApprovalRefund.dialogFormVisible = true
            this.$refs.addEditApprovalRefund.addApprovalForm.id = data.id
            this.$refs.addEditApprovalRefund.addApprovalForm.type = data.type
        }

    },
};
</script>
<style scoped>
/* *{
    margin: 0;
    padding: 0;
} */
.flex {
    display: flex;
    align-items: center;
}

.app-table {
    background: #eff3f5;
    padding: 5px 10px 10px;
    /* width: calc(100vw - 183px); */
    /* width: 90vw; */
}

.app-search {
    display: flex;
    /* flex-direction: ; */
}


.app-body {
    background: white;
    /* padding: 20px 20px 10px 20px; */
    margin-bottom: 10px;
    min-height: calc(100vh -175px);
    margin-top: 10px;
    /* padding-right: 20px; */
}

.serach_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.add_btn {
    background-color: #00c78c;
    color: #fff;
    border-radius: 8px;
    border: none;
}

.export_btn {
    background-color: #FF7200;
    border-radius: 8px;
    color: #fff;
    border: none;
}

.edit_btn {
    background-color: #007EFF;
    color: #fff;
    border-radius: 3px;
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.del_btn {
    background-color: #FF7200;
    color: #FFF;
    border-radius: 3px;
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.down_btn {
    background-color: #fff;
    border: 1px solid #0065FF;
    border-radius: 3px;
    color: #0065FF;
    width: 87px;
    height: 32px;
    font-size: 14px;
}

/* input {
    flex: 1;
    height: 30px;
    border: none;
    outline: none;
    font-size: 16px;
    text-align: start;
} */
.table_header {
    border-radius: 5px 5px 0 0 !important;
}

.btnBox {
    font-size: 14px;
    color: #0065FF;
    margin-left: 20px;
}

.btnBox p {
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.xian {
    width: 1px;
    height: 10px;
    background-color: #8E8E8E;
    margin: 0 10px;
}

.tebleHeader {
    background-color: #0065FF;
}

.aaaaaa {
    background-color: #FF7200 !important;
}

/* ::v-deep .el-table--large .cell {
    padding: 0;
} */
</style>
